<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>欢迎</title>
</head>
<script>
    let themeId;
    window.onload = function () {
        //获取主题id
        themeId = getQuery("themeId");
        showMCByPage(1);
    }

    //展示
    async function showMCByPage(pageNo) {
        let params = {
            themeId: themeId,
            pageNo: pageNo,
            mcTitle: $("mcTitle").value,
            username: $("username").value,
            startDate: $("startDate").value,
            endDate: $("endDate").value
        }

        let pages = await ajaxGet("/mainContent/showMCByPage", params);
        let list = pages.list;
        let str = "";
        console.log(list);
        //输出数据
        for (let i = 0; i < list.length; i++) {
            str += "<div style='display: flex;justify-content: space-around;margin: 5px'>";
            str += `<div style="width: 100px"><a href="/html/main/mainAndSub.html?mcId=${list[i].mainContentId}">${list[i].mcTitle}</a></div>`;
            str += `<div style="width: 50px">${list[i].userBean.username}</div>`;
            str += `<div>${list[i].allSCCount}</div>`;
            str += `<div>${list[i].mainDateTime}</div>`;
            str += "</div>";
            str += "<hr>";
        }
        $("mainContentsBody").innerHTML = str;

        let cutStr = "<div style='display: flex;justify-content: center'>";

        for (let i = 1; i <= pages.pages; i++) {
            cutStr += `<a style="margin: 10px" href="javascript:showMCByPage(${i})">${i}</a>`
        }
        cutStr += "</div>";
        $("cutPageDiv").innerHTML = cutStr;

    }

    async function addMC() {
        //获取当前存储在session中的用户信息
        let userBean = await ajaxGet("/user/getUserSession");
        console.log(userBean)
        let userId = userBean.userId;
        location.href = "/html/main/add.html?userId=" + userId + "&themeId=" + themeId;
    }
</script>
<body>
<div>
    <ul class="layui-nav" style="display: flex;justify-content: center">
        <li class="layui-nav-item layui-this"><a href="/html/theme/theme.html">返回首页</a></li>
        <li class="layui-nav-item"><a href="">登录</a></li>
        <li class="layui-nav-item"><a href="">注册</a></li>
        <li class="layui-nav-item"><a href="javascript:outAccount()">退出</a></li>
        <li class="layui-nav-item"><a href="">管理</a></li>
        <li class="layui-nav-item"><a href="">风格</a></li>
    </ul>
</div>

<div style="display: flex;justify-content: space-around" class="layui-bg-gray">
    <label class="layui-form-label">主题名称</label>
    <input type="text" name="username" id="mcTitle" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 100px">
    <label class="layui-form-label">作者名称</label>
    <input type="text" name="username" id="username" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 100px">
    <label class="layui-form-label">起始日期</label>
    <input type="text" name="username" id="startDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 100px">
    <label class="layui-form-label">结束日期</label>
    <input type="text" name="username" id="endDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 100px">
    <div>
        <button type="button" class="layui-btn" onclick="showMCByPage(1)">点击查询</button>
    </div>
    <div>
        <button type="button" class="layui-btn" onclick="addMC()">发表新帖</button>
    </div>
</div>

<div id="mainContentsHead" style="display: flex;justify-content: space-around" class="layui-bg-blue">
    <label class="layui-form-label">主题</label>
    <label class="layui-form-label">作者</label>
    <label class="layui-form-label">回复数量</label>
    <label class="layui-form-label">发帖时间</label>
</div>

<div id="mainContentsBody" class="layui-bg-gray">

</div>
<!--页码显示-->
<div id="cutPageDiv"></div>

</body>
</html>